<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Example</title>
</head>
<body>

<h1>WebSocket Example</h1>

<!-- Display area for received messages -->
<div id="output"></div>

<!-- Input area for sending messages -->
<input type="text" id="messageInput" placeholder="Type your message">
<button onclick="sendMessage()">Send Message</button>

<script>
    // WebSocket connection URL
    const socket = new WebSocket('ws://localhost:8080/websocket-endpoint');

    // Event handler for when the WebSocket connection is opened
    socket.onopen = function (event) {
        console.log('WebSocket opened');
        // You can send initial messages here if needed
    };

    // Event handler for when a message is received from the server
    socket.onmessage = function (event) {
        const outputDiv = document.getElementById('output');
        outputDiv.innerHTML += '<p>Received message: ' + event.data + '</p>';
    };

    // Function to send a message to the server
    function sendMessage() {
        const messageInput = document.getElementById('messageInput');
        const message = messageInput.value;

        // Send the message to the server
        socket.send(message);

        // Clear the input field
        messageInput.value = '';
    }
</script>

</body>
</html>
